<template>
	<div ref="technologyItemPie" v-resize="resizeChart" style="width: 100%;height: 100%;"></div>
</template>

<script>
    import * as echarts from 'echarts';
    import { color, borderColor, grid, legend } from './chart-conf';
    import homeMixin from '../../../../mixins/dom-resize';
    export default {
        name: 'TechnologyItemPie',
        props: {
            chartData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        mixins: [homeMixin],
        data() {
            return {
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '',
                        subtext: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    color: ['#2d8cf0', 'rgb(169, 124, 246)'],
                    legend: {
                        width: 'auto',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    series: [
                        {
                            name: '状态',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                { value: 58, name: '罗拉转速' },
                                { value: 3, name: '后牵伸倍数' }
                            ],
                            label: {
                                color: '#fff',
                                formatter: (e) => {
                                    return `${e.data.value}`;
                                }
                            },
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.technologyItemPie);
                    this.updateChart();
                });
            },
            updateChart() {
                if (this.example) {
                    this.$nextTick(() => {
                        this.option.series[0].data = this.chartData || [];
                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            }
        },
        mounted() {
            this.initChart();
            this.resize();
        },
        watch: {
            chartData: {
                handler() {
                    this.updateChart();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>

<style scoped lang="scss"></style>
